/*******
 * 处理输入框的视图渲染
 * @params(item) 输入框的基本属性，必选参数
 * @params(form)  用于实现表单的校验，必选参数
 * @params(formItemLayout) 用户自定义label和select框的比例，可选参数
 * @return 输入框的视图
 *******/

import React from 'react';
import { Form, Input, InputNumber, DatePicker, TimePicker } from 'antd';
const { MonthPicker, RangePicker, WeekPicker  } = DatePicker;
const FormItem = Form.Item;

export default function(item,form,formItemLayout,currentFilter) {
    const { getFieldDecorator, getFieldsValue,setFieldsValue } = form;
    const onChange = (value,string) => {
        let data = getFieldsValue();
        data['date'] = string;
        setFieldsValue(data);
    };
    switch (item.type) {
        case 'Input':
            return (
                <FormItem label={item.label} {...formItemLayout}>
                    {getFieldDecorator(item.filed, {
                        initialValue: currentFilter[item.filed],
                        rules: item.rules
                    })(
                        <Input placeholder={item.placeholder}/>
                    )}
                </FormItem>
            );
        case 'InputNumber':
            return (
                <FormItem label={item.label} {...formItemLayout}>
                    {getFieldDecorator(item.filed, {
                        initialValue: currentFilter[item.filed],
                        rules: item.rules
                    })(
                        <InputNumber placeholder={item.placeholder} style={{width: '100%'}}/>
                    )}
                </FormItem>
            );
        case 'DatePicker':
            return (
                <FormItem label={item.label} {...formItemLayout}>
                    {getFieldDecorator(item.filed, {
                        initialValue: currentFilter[item.filed],
                        rules: item.rules
                    })(
                        <DatePicker placeholder={item.placeholder} style={{width: '100%'}}
                                    format={item.dateFormat} onChange={onChange}/>
                    )}
                </FormItem>
            );
        case 'TimePicker':
            return (
                <FormItem label={item.label} {...formItemLayout}>
                    {getFieldDecorator(item.filed, {
                        initialValue: currentFilter[item.filed],
                        rules: item.rules
                    })(
                        <TimePicker placeholder={item.placeholder} style={{width: '100%'}}/>
                    )}
                </FormItem>
            );
        case 'MonthPicker':
            return (
                <FormItem label={item.label} {...formItemLayout}>
                    {getFieldDecorator(item.filed, {
                        initialValue: currentFilter[item.filed],
                        rules: item.rules
                    })(
                        <MonthPicker placeholder={item.placeholder} style={{width: '100%'}}/>
                    )}
                </FormItem>
            );
        case 'RangePicker':
            return (
                <FormItem label={item.label} {...formItemLayout}>
                    {getFieldDecorator(item.filed, {
                        initialValue: currentFilter[item.filed],
                        rules: item.rules
                    })(
                        <RangePicker placeholder={item.placeholder} style={{width: '100%'}}/>
                    )}
                </FormItem>
            );
        case 'WeekPicker':
            return (
                <FormItem label={item.label} {...formItemLayout}>
                    {getFieldDecorator(item.filed, {
                        initialValue: currentFilter[item.filed],
                        rules: item.rules
                    })(
                        <WeekPicker placeholder={item.placeholder} style={{width: '100%'}}/>
                    )}
                </FormItem>
            );
        default:
            return;
    }
}